<template>
  <div id="app">
    <el-row>
      <!-- 布局中常用的居中写法，让宽度8的分栏偏移8个宽度 -->
      <el-col :span="8" :offset="8">
        <!-- 在分栏中添加组件，组件的位置和宽度就由分栏决定 -->
        <el-card>
          <!-- 通过slot插槽将div传递给el-card组件 -->
          <div slot="header">
            <span>商品详情</span>
            <el-button style="float: right; padding: 3px 0" type="text"
              >关闭
            </el-button>
          </div>
          <!-- 内容部分，可以继续用el-row和el-col布局 -->
          <el-row>
            <!-- 左边一半显示商品图片  -->
            <el-col :span="12">
              <img src="https://via.placeholder.com/300" style="width: 100%" />
            </el-col>
            <!-- 右边显示商品描述和购买按钮 -->
            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <div style="padding: 14px">
                    经典汉堡，精选上等食材，鲜嫩多汁，
                    每一口都让味蕾尽情狂欢，给您带来难以忘怀的美味体验！
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12" :offset="2">
                  <el-button type="success" size="mini">立即购买</el-button>
                </el-col>
                <el-col :span="10">
                  <el-button type="warning" size="mini">加入购物车</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: "App",
};
</script>
<style></style>
